<template sol>
  <div>
    <div class="header">
      <!-- <div class="dl-title">
        今日总盈亏:<span id="dayTotal" style="color: red">{{ res.money }}</span>
        账户总余分:<span class="money" id="accBalance" style="color: red">{{
          res.data
        }}</span>
        到期时间:赛车<span id="scTime">2019-09-230</span>时时彩<span
          id="sscTime"
          >2019-09-30</span
        >
      </div> -->
      <div class="dl-log" ref="HelpPrompt">
        欢迎您,<span class="dl-log-user">
          {{account_name}}(<span>{{ nowTime }}</span
          >)
          <a
            @click="closeLogin"
            href="javascript:void(0);"
            title="退出系统"
            class="dl-log-quit"
            >[退出]</a
          >
          <a
            href="javascript:void(0);"
            @click="HelpPrompt"
            title="使用帮助"
            class="dl-log-quit"
            >帮助</a
          >
        </span>
      </div>
    </div>
    <div class="nav_content">
      <div class="nav_div">
        <!-- <marquee
          id="notices"
          scrollamount="6"
          onmouseover="this.stop()"
          onmouseout="this.start()"
          >软件将于7月7日凌晨正式收费，如需继续使用，请找各级代理续费，特此通知!!!</marquee
        > -->
        <ul class="nav_ul" ref="navUl">
          <router-link
            v-for="(item, index) in navlists"
            :key="item.id"
            :to="item.href"
            tag="li"
          >
            <i
              @click="changebg(index)"
              :class="[item.cls, activenav == index ? item.clsan : '']"
            ></i>
          </router-link>
          <!-- <div id="s">
            <marquee
              id="noticeList"
              scrollamount="5"
              onmouseover="this.stop()"
              onmouseout="this.start()"
            >
              <span class="left" style="color:red">系统公告：</span>
              <span class="left" style="color:blue"
                >通知本系统仅供游戏娱乐使用，请勿用于非法用途，一经发现立即封停账号</span
              >
            </marquee>
          </div> -->
        </ul>
      </div>
    </div>
    <div id="helpWrap" ref="helpWrap">
      <div class="helpInner">
        <div
          ref="closeIcon"
          @click="closeHelp"
          class="closeIcon"
          title="关闭"
        ></div>
        <div class="swiper-container" @mouseover="stop" @mouseleave="play">
          <div
            ref="swiperWrapper"
            class="swiper-wrapper"
            :style="containerStyle"
          >
            <div class="swiper-slide">
              <img :src="images[images.length - 1]" />
            </div>
            <div
              v-for="(item, index) in images"
              :key="index"
              class="swiper-slide"
            >
              <img :src="item" />
            </div>
            <div class="swiper-slide">
              <img :src="images[0]" />
            </div>
          </div>
        </div>
        <div
          ref="swiperPrev"
          class="swiper-button-prev"
          @click="move(1720, 1)"
        ></div>
        <div
          ref="swiperNext"
          class="swiper-button-next"
          @click="move(1720, -1)"
        ></div>
        <div
          class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"
        >
          <span
            v-for="(item, index) in 18"
            @click="jump(index + 1)"
            :key="index"
            style="margin: 0 4px"
            :class="[
              'swiper-pagination-span',
              { dotted: index === currentIndex - 1 }
            ]"
          >
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import http from "@/utils/http";
export default {
  name: "Header",
  data() {
    return {
      nowTime: "",
      activenav: "0",
      res: "",
      account_name:"",
      url: require("../images/2_an.png"), // 解决图片编码问题
      navlists: [
        { id: 1, href: "/index/home", cls: "nav_home", clsan: "nav_home_an" },
        // {
        //   id: 2,
        //   href: "/index/basic",
        //   cls: "nav_basic",
        //   clsan: "nav_basic_an"
        // },
        { id: 3, href: "/index/user", cls: "nav_user", clsan: "nav_user_an" },
        // {
        //   id: 4,
        //   href: "/index/monitor",
        //   cls: "nav_monitor",
        //   clsan: "nav_monitor_an"
        // },
        // {
        //   id: 5,
        //   href: "/index/report",
        //   cls: "nav_report",
        //   clsan: "nav_report_an"
        // },
        // {
        //   id: 6,
        //   href: "/index/backwater",
        //   cls: "nav_backwater",
        //   clsan: "nav_backwater_an"
        // },
        // { id: 7, href: "/index/odds", cls: "nav_odds", clsan: "nav_odds_an" },
        { id: 8, href: "/index/room", cls: "nav_room", clsan: "nav_room_an" },
        {
          id: 9,
          href: "/index/agent",
          cls: "nav_agent",
          clsan: "nav_agent_an"
        },
        {
          id: 12,
          href: "/index/roomlist",
          cls: "nav_agentstatement",
          clsan: "nav_agentstatement_an"
        }
        // {
        //   id: 10,
        //   href: "/index/agentstatement",
        //   cls: "nav_agentstatement",
        //   clsan: "nav_agentstatement_an"
        // },
        // {
        //   id: 11,
        //   href: "/index/other",
        //   cls: "nav_other",
        //   clsan: "nav_other_an"
        // }

      ],
      images: [
        require("../images/nav1.png"),
        // require("../images/nav2.png"),
        require("../images/nav3.png"),
        // require("../images/nav4.png"),
        // require("../images/nav5.png"),
        // require("../images/nav6.png"),
        // require("../images/nav7.png"),
        require("../images/nav8.png"),
        require("../images/nav9.png"),
        // require("../images/nav10.png"),
        require("../images/nav11.png"),
        require("../images/nav12.png"),
        require("../images/nav13.png"),
        require("../images/nav14.png"),
        require("../images/nav15.png"),
        require("../images/nav16.png"),
        require("../images/nav17.png"),
        require("../images/nav18.png")
      ],
      currentIndex: 1,
      distance: -1720,
      transitionEnd: true,
      speed: 30
    };
  },
  computed: {
    containerStyle() {
      //这里用了计算属性，用transform来移动整个图片列表
      return {
        transform: `translate3d(${this.distance}px, 0, 0)`
      };
    }
  },
  methods: {
    // 本地时间
    getTime() {
      let that = this;
      var year = new Date(new Date()).getFullYear();
      var month =
        new Date(new Date()).getMonth() + 1 < 10
          ? "0" + (new Date(new Date()).getMonth() + 1)
          : new Date(new Date()).getMonth() + 1;
      var date =
        new Date(new Date()).getDate() < 10
          ? "0" + new Date(new Date()).getDate()
          : new Date(new Date()).getDate();
      var hh =
        new Date(new Date()).getHours() < 10
          ? "0" + new Date(new Date()).getHours()
          : new Date(new Date()).getHours();
      var mm =
        new Date(new Date()).getMinutes() < 10
          ? "0" + new Date(new Date()).getMinutes()
          : new Date(new Date()).getMinutes();
      var ss =
        new Date(new Date()).getSeconds() < 10
          ? "0" + new Date(new Date()).getSeconds()
          : new Date(new Date()).getSeconds();
      that.nowTime =
        year + "-" + month + "-" + date + " " + hh + ":" + mm + ":" + ss;
    },
    changebg(index) {
      this.activenav = index;
    },
    HelpPrompt() {
      let helpWrap = this.$refs.helpWrap;
      helpWrap.style.display = "block";
      this.play();
    },
    closeHelp() {
      let helpWrap = this.$refs.helpWrap;
      helpWrap.style.display = "none";
      this.stop();
    },
    move(offset, direction, speed) {
      if (!this.transitionEnd) return;
      this.transitionEnd = false;
      direction === -1
        ? (this.currentIndex += offset / 1720)
        : (this.currentIndex -= offset / 1720);
      if (this.currentIndex > 18) this.currentIndex = 1;
      if (this.currentIndex < 1) this.currentIndex = 18;
      const destination = this.distance + offset * direction;
      this.animate(destination, direction, speed);
    },
    animate(des, direc, speed) {
      if (this.temp) {
        window.clearInterval(this.temp);
        this.temp = null;
      }
      const temp = window.setInterval(() => {
        if (
          (direc === -1 && des < this.distance) ||
          (direc === 1 && des > this.distance)
        ) {
          this.distance += speed * direc;
        } else {
          this.transitionEnd = true;
          window.clearInterval(temp);
          this.distance = des;
          if (des < -30960) this.distance = -1720;
          if (des > -1720) this.distance = -30960;
        }
      }, 20);
    },
    jump(index) {
      const direction = index - this.currentIndex >= 0 ? -1 : 1;
      const offset = Math.abs(index - this.currentIndex) * 1720;
      const jumpspeed =
        Math.abs(index - this.currentIndex) === 0
          ? this.speed
          : Math.abs(index - this.currentIndex) * this.speed;
      this.move(offset, direction, jumpspeed);
    },
    play() {
      if (this.timer) {
        window.clearInterval(this.timer);
        this.timer = null;
      }
      this.timer = window.setInterval(() => {
        this.move(1720, -1, this.speed);
      }, 4000);
    },
    stop() {
      window.clearInterval(this.timer);
      this.timer = null;
    },
    init() {
      window.onblur = function() {
        this.stop();
      }.bind(this);
      window.onfocus = function() {
        this.play();
      }.bind(this);
    },
    closeLogin() {
      let message = confirm("确认退出?");
      if (message == true) {
        setTimeout(() => {
          window.sessionStorage.removeItem("token");
          console.log(this.$router);
          this.$router.replace("/login");
        }, 1000);
      }
    },
    monagerMin() {
      let token=sessionStorage.getItem("token")
      if(token===""){
        clearInterval(this.timer);
      }else{
        http
        .post(
          "/api/login/room_user/head?token="+token
        )
        .then(response => {
          this.res = response.data;
        });
     }
    }

  },

  created() {
    this.monagerMin();
    let user = JSON.parse(localStorage.getItem("account"));
    this.account_name = user.account.account_name;
    // setInterval(() => {
    //   this.monagerMin();
    // }, 5000);
  },
  mounted() {
    // 本地时间
    var that = this;
    that.getTime();

    // that.switch();
    setInterval(function() {
      that.getTime();
    }, 1000);
    that.init();
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style>
@import "~@/styles/reset.css";
body {
  font-family: "SimSun", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  min-width: 1200px;
  overflow-x: auto;
}
.header {
  background-color: #1b3160;
  height: 30px;
  width: 100%;
  overflow: hidden;
  background: url(../images/main-nav-bg.png) repeat-x 0 0 #204077;
}
.dl-title {
  float: left;
  color: #c1d5ec;
  font-family: "Microsoft YaHei";
  margin-left: 12px;
  font-size: 18px;
  line-height: 36px;
}
.dl-log {
  color: #c1d5ec;
  float: right;
  padding: 10px 16px 0 0;
  font-size: 12px;
  line-height: 18px;
  font-family: "SimSun", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dl-log-quit {
  color: #c1d5ec;
  padding-left: 8px;
  text-decoration: none;
}
.dl-log a:hover {
  color: #f60;
  text-decoration: underline;
}
.nav_content {
  width: 100%;
  height: 115px;
  background: #faf2cc;
}
.nav_div {
  width: 100%;
  /*padding: 6px 0;*/
  padding: 20px 0;
}
#notices {
  font-size: 14px;
  font-weight: bold;
  color: red;
}
.nav_ul {
  list-style: none;
  margin: 0;
}
.nav_ul li {
  float: left;
  width: 80px;
  height: 80px;
  margin-right: 5px;
  line-height: 22px;
}
.nav_ul li i {
  display: inline-block;
  width: 100%;
  height: 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
.nav_home {
  background: url(../images/1.png);
}
.nav_home_an {
  background: url(../images/1_an.png);
}
.nav_home:hover {
  background: url(../images/1_an.png);
  background-size: 100% 100%;
}
.nav_basic {
  background: url(../images/2.png);
}
.nav_basic_an {
  background: url(../images/2_an.png);
}
.nav_basic:hover {
  background: url(../images/2_an.png);
  background-size: 100% 100%;
}
.nav_user {
  background: url(../images/3.png);
}
.nav_user_an {
  background: url(../images/3_an.png);
}
.nav_user:hover {
  background: url(../images/3_an.png);
  background-size: 100% 100%;
}
.nav_monitor {
  background: url(../images/4.png);
}
/* .nav_monitor_an {
  background: url(../images/4_an.png);
}
.nav_monitor:hover {
  background: url(../images/4_an.png);
  background-size: 100% 100%;
} */
.nav_report {
  background: url(../images/5.png);
}
.nav_report_an {
  background: url(../images/5_an.png);
}
.nav_report:hover {
  background: url(../images/5_an.png);
  background-size: 100% 100%;
}
.nav_backwater {
  background: url(../images/6.png);
}
.nav_backwater_an {
  background: url(../images/6_an.png);
}
.nav_backwater:hover {
  background: url(../images/6_an.png);
  background-size: 100% 100%;
}
.nav_odds {
  background: url(../images/7.png);
}
.nav_odds_an {
  background: url(../images/7_an.png);
}
.nav_odds:hover {
  background: url(../images/7_an.png);
  background-size: 100% 100%;
}
.nav_room {
  background: url(../images/8.png);
}
.nav_room_an {
  background: url(../images/8_an.png);
}
.nav_room:hover {
  background: url(../images/8_an.png);
  background-size: 100% 100%;
}
.nav_agent {
  background: url(../images/9.png);
}
.nav_agent_an {
  background: url(../images/9_an.png);
}
.nav_agent:hover {
  background: url(../images/9_an.png);
  background-size: 100% 100%;
}
.nav_agentstatement {
  background: url(../images/10.png);
}
.nav_agentstatement_an {
  background: url(../images/10_an.png);
}
.nav_agentstatement:hover {
  background: url(../images/10_an.png);
  background-size: 100% 100%;
}
.nav_other {
  background: url(../images/11.png);
}
.nav_other_an {
  background: url(../images/11_an.png);
}
.nav_other:hover {
  background: url(../images/11_an.png);
  background-size: 100% 100%;
}

#s {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  height: 80px;
}
#noticeList {
  position: absolute;
  top: 0;
  left: 10px;
  height: 80px;
  line-height: 80px;
  font-size: 16px;
  color: bule;
}
.left {
  margin-left: 10px;
}
#helpWrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  padding: 100px;
  background-color: rgba(0, 0, 0, 0.7);
}
.helpInner {
  position: relative;
  width: 100%;
  height: 100%;
}
.helpInner .closeIcon {
  position: absolute;
  width: 32px;
  height: 32px;
  background: url(../images/closeIcon.png) no-repeat center;
  top: -22px;
  right: -22px;
  cursor: pointer;
  z-index: 9999999;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide {
  height: 100%;
}
.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  /* display: flex; */
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
#helpWrap img {
  display: block;
  width: 100%;
  height: 100%;
}
.swiper-button-prev {
  background-image: url(../images/prve.svg);
  left: 10px;
  right: auto;
}
.swiper-button-next {
  background-image: url(../images/next.svg);
  right: 10px;
  left: auto;
}
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 1000;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 0.3s opacity;
  -o-transition: 0.3s opacity;
  transition: 0.3s opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-span {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
.dotted {
  opacity: 1;
  background: #007aff;
}
</style>
